<style>
    #topCharts{        
    }
    #topCharts > div > div > svg{
        display: block;
        height: 300px;
    }
    .chartWrapper{
        border: solid 1px #c7c7c7;
        padding: 5px;
        margin-bottom: 10px;
        display: block;
        text-align: -webkit-center;
    }		
    .chartLabel{
        font-size: 1.2em;
        text-align: center;
        padding: 4px;
    }
    .chartHolder{
    }
	
    #topStats {
        margin: 0 9px;
    }
    #topStats > div {
        display: flex;
    }
    #topStats > div > div {
        flex: 1 1 auto;
        margin: 18px 9px 0px 9px;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }
    .boxStatsHeader{
        font-size: 1.3em;
        margin: 0 0 5px 10px;
    }
    #boxStatsLeft{
        background-color: #b064e1;
    }
    #boxStatsRight{
        background-color: #10bb9c;
    }
    .boxStats{
        border: solid 0px #c7c7c7;
        color: white;
    }
    .boxStatsList{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        opacity: 0.77;
        margin-bottom: 5px;
        flex: 1 1 auto;
        align-content: center;
    }
    .boxStatsList i.fa{
        height: 15px;
        width: 33px;
        text-align: center;
    }
    .boxStatsList > div{
        padding: 5px 20px;
    }
    .boxStatsList > div > div{
        padding: 3px;
    }
    #timeSelector {
        padding-top: 25px;
        padding-bottom: 15px;
        text-align:center;
    }
    #bottomCharts{
        padding: 18px;
    }
    #bottomCharts > div > div > svg{
        display: block;
        height: 280px;
    }

    #bottomTableStats {
        padding-bottom: 20px;
    }
    #statTable {
        margin: 0 auto;
        text-align: center;
    }
</style>

{{ 
	function getTime(time){					
		var t,y,m,d,h,i,s;  
			var ts = time; 
			t = ts ? new Date(ts*1000) : new Date();  
			y = t.getFullYear();  
			m = t.getMonth()+1;  
			d = t.getDate();  
			h = t.getHours();  
			i = t.getMinutes();  
			s = t.getSeconds();  						 
			return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s); 
	}
}}

{{ function capitalizeFirstLetter(t){return t.charAt(0).toUpperCase()+t.slice(1)} }}

<main>						
<div class="row">
	<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">	
	
		<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-editbutton="false">
			<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>算力曲线图</h2>
			</header>
			
			<div id="topCharts">
				<div class="chartWrapper">
					<div class="chartHolder"><svg id="poolHashrate"/></div>
				</div>							    
			</div>
		</div>	

		<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-editbutton="false">
			<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>币种数据</h2>
			</header>
			
			<div>
				<div class="widget-body">
					<div class="table-responsive">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>币种</th>
									<th>钱包版本</th>
									<th>链接数量</th>
									<th>区块高度</th>
									<th>挖矿难度</th>
									<th>支付时间</th>
									<th>最低支付</th>
									<th>挖矿费用</th>
									<th>全网算力</th>
									<th>最近出块</th>
								</tr>
							</thead>
	
						<tbody>
							{{ for(var pool in it.stats.pools) { }}
								<tr>
									<td>{{=capitalizeFirstLetter(it.stats.pools[pool].name)}}</td>
									<td>{{=it.stats.pools[pool].poolStats.networkVersion}}</td>
									<td>{{=it.stats.pools[pool].poolStats.networkConnections}}</td>
									<td>{{=it.stats.pools[pool].poolStats.networkBlocks}}</td>
									<td>{{=Number(Math.round(it.stats.pools[pool].poolStats.networkDiff + 'e' + 4) + 'e-' + 4)}}</td>
									<td><script>a={{=it.stats.pools[pool].paymentInterval}};var b = a/60;document.write(b)</script>分钟</td>
									<td>{{=it.stats.pools[pool].minimumPayment}}{{=it.stats.pools[pool].symbol}}</td>
									{{ var total = 0.0; }}
            								{{ var rewardRecipients = it.stats.pools[pool].rewardRecipients || {}; }}
            								{{ for (var r in rewardRecipients) { }}
            									{{ total += rewardRecipients[r]; }}
            								{{ } }}
            								<td>{{=total}}%</td>
									<td>{{=it.stats.pools[pool].poolStats.networkString}}</td>
									<td>{{=getTime(it.stats.pools[pool].poolStats.curtime)}}</td>
								</tr>
							{{ } }}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		
		<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-editbutton="false">
			<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>矿池数据</h2>
			</header>
			
			<div>
				<div class="widget-body">
					<div class="table-responsive">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>币种</th>
									<th>算法</th>
									<th>矿工数</th>
									<th>有效算力</th>
									<th>无效算力</th>
									<th>总共出块</th>
									<th>待定块</th>
									<th>确定块</th>
									<th>孤块</th>
									<th>算力</th>
								</tr>
							</thead>
							
							<tbody>
							{{ for(var pool in it.stats.pools) { }}
								<tr>
									<td>{{=capitalizeFirstLetter(it.stats.pools[pool].name)}}</td>
									<td>{{=it.stats.pools[pool].algorithm}}</td>
									<td>{{=Object.keys(it.stats.pools[pool].workers).length}}</td>
									<td>{{=it.stats.pools[pool].poolStats.validShares}}</td>
									<td>{{=it.stats.pools[pool].poolStats.invalidShares}}</td>
									<td>{{=it.stats.pools[pool].poolStats.validBlocks}}</td>
									<td>{{=it.stats.pools[pool].blocks.pending}}</td>
									<td>{{=it.stats.pools[pool].blocks.confirmed}}</td>
									<td>{{=it.stats.pools[pool].blocks.orphaned}}</td>
									<td>{{=it.stats.pools[pool].hashrateString}}</td>
								</tr>
							{{ } }}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</article>
</div>

<script>
    document.querySelector('main').appendChild(document.createElement('script')).src = '/static/stats.js';
</script>
</main>
